<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.min.js"></script>
		<link rel="stylesheet" href="./login.css">
		<!-- Insert this line above script imports  -->
		<script>if (typeof module === 'object'){window.module = module; module = undefined;}</script>

		<script src="./jq.js"></script>    
		<script>if (window.module) module = window.module;</script>
		<script>
			var ipcRenderer = require('electron').ipcRenderer;
		</script>
		<style>
			  html,body{
				font-size: 10px;

			}
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				outline: none;
			}
			#app {
			font-family: 'Avenir', Helvetica, Arial, sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			/* text-align: center; */
			color: #2c3e50;
			font-size: 16px;
			}
			h1, h2,h3,h4,h5 {
			font-weight: normal;
			}
			h5{
			font-size: 16px;
			}
			h4{
			font-size: 18px;
			}
			h3{
			font-size: 20px;
			}
			h2{
			font-size: 30px;
			}
			h1{
			font-size: 40px;
			}
			p,a{
			font-size: 14px;
			}
			ul {
			list-style-type: none;
			padding: 0;
			}
			span{
			font-size: 12px;
			}
			li {
			display: inline-block;
			}
			a {
			/* color: #fff; */
			text-decoration: none;
			}
			.models{
			position: fixed;
			z-index: 12;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, .6)
			}
			input,button,select,textarea {outline: none;border: 1px solid #eee;}
			::-webkit-scrollbar-track-piece {
				background-color: #f8f8f8
			}

			::-webkit-scrollbar {
				width: 3px;
				height: 3px
			}

			::-webkit-scrollbar-thumb {
				background-color: #ddd;
				background-clip: padding-box;
				min-height: 28px
			}

			::-webkit-scrollbar-thumb:hover {
				background-color: #bbb
			}
		</style>
	</head>
	<body>
			<div class="login" id="app">
			  <h5 style="height: 35px;line-height: 35px; text-indent: 15px;background: #fff; -webkit-app-region: drag;">
				驾校通系统
				<img src="./images/close.png" alt="" @click="close" style="width: 20px;margin: 0 13px;cursor: pointer;float: right;margin-top: 6px;-webkit-app-region:no-drag;" >
			   </h5>
			  <ul class="log-top">
				<li @click="overevent(0)" :class="{show:nowidx==0,next:next==0,prve:prve==0}">
					<div>
					  <img src="./images/loginJ.png" alt="">
					  <span></span>
					</div>
					<span>Login</span>
					<b>登录</b>
		  
				</li>
		  
				<li @click="overevent(3)"  :class="{show:nowidx==3,next:next==3,prve:prve==3}">
					<div>
					  <img src="./images/images/logint_03.png" alt=""><span></span>
					</div>
					<span>ABOUT Service</span>
					<b>联系我们</b>
				</li>
			  </ul>
			  <dl>
				<dd v-show="nowidx==0" class="login-input">
				  <h5>账号登陆</h5>
				  <div><input type="text" v-model="data.username"></div>
				  <div><input type="password" v-model="data.pass1"></div>
				  <p>
					<label for="checkbox">
					  <input type="checkbox" id="checkbox" v-model="isold">
					  记住密码
					</label>
				   <router-link to="" style="color: red;pointer-events: none;" v-if="text">
					  {{text}}
					</router-link >
				  </p>
				  <button @click="sub()">登录</button>
				</dd>
		  
				<dd v-show="nowidx==3" class="serter">
				  <ol>
					<li>
					  <img src="./images/logphone_03.png" alt="">
					  <p>
						拨打24小时服务热线
						<small>24h Hotline</small>
					  </p>
					  <span>400-930-9930</span>
					</li>
					<li>
					  <img src="./images/logxin_03.png" alt="">
					  <p>
						服务邮箱
						<small>Service Email</small>
					  </p>
					  <span>33665155@qq.com</span>
					</li>
					<li style="padding-top: 1rem;overflow: hidden;">
					  <img src="./images/logwei_03.png" alt="">
					  <p>
						服务微信
						<small>Service Wechat</small>
					  </p>
					  <span>
						<img src="./images/weierwei_03.png" alt="" style="margin-top: -2.5rem;">
					  </span>
					</li>
				  </ol>
				</dd>
			  </dl>
			  <img src="./images/log-log_03.png" alt="">
			</div>
			
		  <script>
			var app = new Vue({
			  el:"#app",
			  data() {
				return {
				  data:{username:'',pass1:'',pass:''},
				  next:1,
				  prve:0,
				  nowidx:0,
				  text:false,
				  isold:false,
				  Url:'http://81.71.136.172:8082'
				}
			  },
			  methods:{
				confirm(data){//弹窗
					if(!data) data = {};
					if(!data.title) data.title='我是标题！';
					if(!data.msg) data.msg='我是内容主体！';
					if(!data.success) data.success=function a(){};
					if(!data.error) data.error=function a(){};
					var str = `
						<div class="confirm" style="position: fixed;z-index:10; width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,.5);">
						<div style="max-width:28rem;min-width:24rem;position: absolute;left: 50%;top: 0;transform: translate(-50%,-50%);transform: -webkit-translate(-50%,-50%);background:#fff;border-radius:.6rem;">
						<h5 style="padding:0 1rem; font-size: 1.8rem;text-align: center;line-height: 3.5rem;">`+data.title+`</h5>
						<p style="padding:0 1rem;min-height:4rem; font-size: 1.4rem;text-align: center;line-height: 1.8rem;margin-bottom:1rem;">`+data.msg+`</p>
						<div>
							<button style="width:50%;font-size:1.7rem;border:0;border-top:1px solid #ccc; outline:none;color:#ffb000;background:none;float:left;line-height:3rem">确认</button>
							<button style="width:50%; font-size:1.7rem;border:0;border-left:1px solid #ccc;border-top:1px solid #ccc; outline:none;background:none;float:left;line-height:3rem">取消</button>
						</div>
						</div>
						</div>
					`;
					$('body').append(str);
					$('.confirm>div').animate({top:'30%'},300);
					$('.confirm button').click(function(){
						if($(this).index() == 0){
						data.success();
						}else{
						data.error();
						};
						$('.confirm').remove();
					});
				},
				getData(obj){
					$.ajax({
						url:obj.url?obj.url:obj.$root.Url,
						type:obj.type?obj.type:'get',
						data:obj.json?obj.json:{},
						dataType:'json',
						success:obj.success?obj.success:function(){},
						error:obj.error?obj.error:function(e){
						}
					})
				},
				overevent(id){
				  this.nowidx = id;
				  this.next = id + 1;
				  this.prve = id - 1;
				},
				close(){
				  ipcRenderer.send('closeWin');
				},
				sub(){
				  var _this = this;
				  if(!this.data.username) return this.text = '用户名不能为空';
				  if(!this.data.pass1) return this.text = '密码不能为空';
				  this.getData({
					url:_this.Url+'/login',
					json:{username:this.data.username,pass:this.data.pass1},
					type:'post',
					success:function(e){
					  if(e.data.success){
						  if(_this.isold){
							ipcRenderer.send('$session',{user:{val:_this.data.username,end:60*60*24*7},type:'set'});
							ipcRenderer.send('$session',{pass:{val:_this.data.pass1,end:60*60*24*7},type:'set'});
						  }else{
							ipcRenderer.send('$session',{name:'user',type:'del'})
							ipcRenderer.send('$session',{name:'pass',type:'del'})
						  };
						ipcRenderer.send('index');
					  }else{
						_this.confirm({title:'app提示',msg:e.data.info});
					  }
					},
					error:function(){
		  
					}
				  });
				}
			  },
			  mounted() {
				var _this = this;
				ipcRenderer.send('$session',{name:'user'});
				ipcRenderer.send('$session',{name:'pass'});
				ipcRenderer.on('ondata',function(e,a){
					if(a.name == 'user'){
						_this.data.username = a.val?a.val:'';
					}
					if(a.name == 'pass'){
						_this.data.pass1 = a.val?a.val:'';
						_this.isold = a.val?true:false;
					}
				})
			  }
			}) 
		  </script>
	</body>
</html>
